@import "./alike";

//渲染区域
.main {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 120px;
    background-color: #f0f3ef;

    .main_wraper {
        width: 80%;
        margin: auto;
        position: relative;

        //放大镜区域
        .container_page {
            // width: 452px;
            // margin-left: 50px;
            height: 400px;

            .small-img {
                width: 375px;
                height: 375px;
                position: relative;
                border: 1px solid #ddd;

                #small-img-img {
                    width: 100%;
                    height: 100%;
                }

                .focus {
                    width: 250px;
                    height: 250px;
                    background: #FEDE4F;
                    opacity: 0.5;
                    position: absolute;
                    left: 0;
                    top: 0;
                    display: none;
                }
            }

            .big-img {
                width: 400px;
                height: 400px;
                position: absolute;
                left: 560px;
                top: 0;
                z-index: 100;
                overflow: hidden;
                border: 1px solid #ddd;
                display: none;

                #big-img-img {
                    width: 600px;
                    height: 600px;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
        //详情渲染区
    .render_box {
           position: absolute;
           top:375px;
           left: 0;
           right: 0;
            background-color: #eeeeee;
            padding-bottom: 15px;


            .container-page {
                // background-color: #ddd;
                margin: auto;
                width: 80%;
                margin-top: 20px;
                border-radius: 10px;
                overflow: hidden;
                padding-bottom: 10px;
                position: relative;

                p {
                    font-size: 24px;
                    text-align: left;
                    margin-top: 10px;
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    height: 24px;
                    line-height: 24px;
                    color: rgb(243, 122, 74);
                    
                }

                b {
                    font-size: 20px;
                    color: #13d6c4;
                    display: inline-block;
                    vertical-align: bottom;
                    line-height: 20px;
                }

                i {
                    vertical-align: bottom;
                    font-style: normal;
                    background-color: #13d6c4;
                    color: #fff;
                    padding: 4px;
                    display: inline-block;
                    transform: skewX(-15deg);
                    border-radius: 3px;
                    font-size: 14px;
                }

                strong {
                    display: inline-block;
                    vertical-align: bottom;
                    font-size: 12px;
                    color: #999999;
                }

                span {
                    text-decoration: line-through;
                    color: #d24b64;
                    margin-top: 10px;
                    display: inline-block;
                }

                button {
                    border: none;
                    position: absolute;
                    right: 10px;
                    bottom: 2px;
                    border-radius: 50px;
                    width: 100px;
                    height: 30px;
                    line-height: 30px;
                    background-color: #fc7905;
                    text-align: right;
                    color: #fff;


                    span {
                        margin: 0;
                        text-align: center;
                        color: #fff;
                        background-color: #fec006;
                        position: absolute;
                        top: 0;
                        left: 0;
                        border-radius: 50px 0 0 50px;
                        width: 40px;
                    }
                }

            }

            &:nth-of-type(4n) {
                margin-right: 0px;

            }
        }







    }
}